<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="invite-friends-page min-h-screen bg-gray-50">
    <view class="bg-gradient-to-r from-orange-600 to-orange-400 text-white p-4 sticky pt-header top-0 z-10">
      <view class="flex items-center">
        <view class="p-1 mr-2" @click="goBack">
          <ChevronLeft class="w-6 h-6" />
        </view>
        <view class="text-xl font-bold">邀请好友</view>
      </view>
    </view>

    <view class="p-6 flex flex-col items-center">
      <view class="w-full max-w-md bg-white rounded-lg shadow-lg overflow-hidden mb-8">
        <view class="relative">
          <image src="http://llcdn.jxsr.com/0fb700a4-2859-4acf-a64c-1636246c8b4f0.jpg" alt="邀请海报"
            class="w-[650rpx] h-[650rpx]" />

          <view class="absolute bottom-4 right-4 bg-white p-2 rounded-lg shadow-md">
            <canvas class="code-item w-20 h-20" canvas-id="qrcode" />
            <view class="text-xs text-center mt-1 text-gray-600">扫码加入</view>
          </view>
        </view>

        <view class="p-5">
          <view class="text-lg font-bold text-gray-800 mb-2">
            邀请好友，双方各得
            <text class="text-orange-500">50</text>
            积分
          </view>
          <view class="text-sm text-gray-600">
            邀请好友注册并完成首单交易，您和好友各获得50积分奖励，积分可在积分商城兑换多种好礼！
          </view>

          <!-- Invitation Code -->
          <view class="mt-4 flex items-center justify-between bg-orange-50 p-3 rounded-lg">
            <view>
              <view class="text-xs text-gray-500">您的专属邀请码</view>
              <view class="text-lg font-bold text-orange-500">{{ invitationCode }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="w-full max-w-md space-y-4">
        <!-- <button
          class="w-full bg-orange-500 text-white rounded-lg font-medium flex items-center justify-center"
          open-type="share"
          @click="shareWithFriends"
        >
          <i class="iconfont icon-fenxiang w-5 text-5 mr-2"></i>
          分享好友
        </button> -->
        <wd-button type="icon" icon="share" open-type="share" class="absolute top-4 right-4 text-3"
          @click="shareWithFriends"></wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { ChevronLeft, Share2, Download, Link } from 'lucide-vue-next'
import { http } from '@/utils/http'
import wxcode from 'uniapp-qrcode'

const invitationCode = ref('')

const shareWithFriends = () => {
  uni.showShareMenu({
    title: '邻里生活荟',
    content: '邀请您加入邻里生活荟',
    imageUrl: 'http://llcdn.jxsr.com/0fb700a4-2859-4acf-a64c-1636246c8b4f0.jpg',
    path: '/pages/index/index',
    success: (result) => {
      console.log('result', result)
    },
    fail: (error) => {
      console.log('error', error)
    },
  })
}

const goBack = () => {
  uni.navigateBack()
}

const getUserInfo = async () => {
  let res = await http.get('/api/user/my')
  if (res.code == 200) {
    invitationCode.value = res.data.invitationCode
    wxcode.qrcode('qrcode', res.data.invitationCode, 160, 160)
  }
}

onReady(() => {
  getUserInfo()
})

onShareAppMessage(() => {
  return {
    title: '邻里生活荟',
    content: '邀请您加入邻里生活荟',
    imageUrl: 'http://llcdn.jxsr.com/0fb700a4-2859-4acf-a64c-1636246c8b4f0.jpg',
    path: '/pages/index/index',
  }
})
onShareTimeline(() => {
  return {
    title: '邻里生活荟',
    content: '邀请您加入邻里生活荟',
    imageUrl: 'http://llcdn.jxsr.com/0fb700a4-2859-4acf-a64c-1636246c8b4f0.jpg',
    path: '/pages/index/index',
  }
})
</script>
